<!-- 练习题 -->
<template>
  <el-main style="padding: 20px;">
      <el-dialog :visible.sync="showtianjia" width="40%">
      <el-form class="demo-ruleForm">
        <div class="block">
          <span class="demonstration">选择分类</span>
          <el-cascader
            v-model="val2"
            :options="toplist"
            @change="handleChange"
            :props="listchange"
          ></el-cascader>
        </div>
      </el-form>
      <el-button type="primary" style="margin-top:10%" size="mini" @click="addWord()"> 确认 </el-button>
    </el-dialog>
    <div>
    <el-upload class="upload-demo" :action="url"         :http-request="uploadFile"
 :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" multiple :limit="3" :file-list="fileList">
      <el-button size="small" type="primary">导入习题(请导入.csv文件，编码为utf-8)</el-button>
    </el-upload>
    <el-button size="small" @click="delExam" type="primary" style="display: block;margin-top: 10px;">删除选中</el-button>
    <div>
      <el-button
        size="small"
        @click="fenlei"
        type="primary"
        style="display: block; margin-top: 10px"
        >选择分类</el-button
      ></el-button>
    </div>
    </div>
    <!-- <el-radio-group v-model="radio" style="margin-top: 20px;" v-if="typeList">
      <el-radio :label="item.categoryCode" v-for="(item, index) in typeList" :key="index">{{ item.categoryName }}</el-radio>
    </el-radio-group> -->

    <div class="table-box">
      <el-table :data="dataExam"  @selection-change="handleSelectionChange" style="width: 100%">
        <el-table-column type="selection" width="55" ></el-table-column>
        <el-table-column prop="content" label="题目" width="320"></el-table-column>
        <el-table-column v-if="dataExam.type == 1" prop="item" label="选项"></el-table-column>
        <el-table-column prop="answer" label="答案" width="320"></el-table-column>
        <el-table-column prop="analysis" label="答案解析"></el-table-column>
        <el-table-column prop="item" label="选项"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope"> 
            <el-button @click="setbianji(scope.row)" type="text" size="mini">编辑</el-button>
            <el-button type="text" size="mini" @click="deleteObj(scope.row)">删除</el-button>
          </template>
        </el-table-column>
       </el-table>

      <el-dialog :visible.sync="tianjia" width="80%">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="题目"><el-input v-model="form.content" placeholder="about"></el-input></el-form-item>
          <el-form-item label="答案解析"><el-input type="textarea" v-model="form.analysis"></el-input></el-form-item>
          <el-form-item label="答案"><el-input type="textarea" v-model="form.answer"></el-input></el-form-item>
          <el-form-item label="选项"><el-input type="textarea" v-model="form.item" placeholder="非必填,判断题和选择题的多选项用 - 隔开"></el-input></el-form-item>
          <el-form-item label="类型">
            <!-- <el-input type="textarea" v-model="form.type"></el-input> -->
            <el-radio-group v-model="setradio" style="margin-top: 20px;">
              <el-radio :label="item.categoryCode" v-for="(item, index) in typeList" :key="index">{{ item.categoryName }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">编辑</el-button>
            <el-button @click="tianjia = false">取消</el-button>
          </el-form-item>
        </el-form>
        <el-button type="primary" size="mini" @click="setWord()">添加</el-button>
      </el-dialog>
      <el-pagination background layout="prev, pager, next" :page-count="data.pages" :current-page="current" @current-change="chaxun"></el-pagination>
    </div>
  </el-main>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
        listchange: {
        label: "className",
        value: "classId",
      },
      showtianjia:false,
      setradio: '',
      radio: 3,
      select: [],
      form: {},
      fileList: [],
      page: 1,
      toplist:[],
      typeList: [],
      dataExam: [],
      current: 1,
      val2:'',
      size: 20,
      tianjia: false,
      // url: 'https://api.shida123.cn/back/practicestores/importPractice'
      // url: 'https://api.shida123.cn/back/practicestores/importPractice'
      url:'http://localhost:8082/back/practicestores/importPractice'
    };
  },
  mounted: function() {
    this.addWord();
    // this.getType();
        this.getFenlei();

    // POST /back/practicestores/importPractice
  },
//   watch:{
//     radio(){
//       this.page = 1;
//       this.addWord()
//     }
//   },
  inject: ['reload'],
  methods: {
    //上传
     uploadFile(param){
         var fileObj = param.file;
        var form = new FormData();   //在创建FormData对象时指定表单的元素  我们需要传的参数
        form.append("file", param.file);
       form.append("classId", this.classId);
       axios({
         method: 'POST',
         url: this.url,
         headers: {
           'Content-Type': 'multipart/form-data'
         },
         data:form
       }).then(res => {
         //console.log(res)
         if(res.data.code == 10000){
           this.$message({
             type:'success',
             message:"上传成功"
           })
         } 
       })
     },
         //选择结果
    handleChange(e) {
      //console.log(e);
      this.classId = e[1];
    },
      //獲取分类
      getFenlei() {
      this.postRequest(
        "/back/class/queryPracticeClassList?pageNo=" + this.currentPage + "&pageSize=20"
      ).then((res) => {
        this.toplist = res.data.data;
      });
    },
      fenlei(){
      this.showtianjia = true
    },
    getTypeExam(){
      
    },
    handleSelectionChange(e) {
      //console.log(e);
      this.select = e;
    },
    delExam() {
      let arr = [];
      this.select.forEach(item => {
        arr.push(item.practiceId);
      });
      arr = arr.join(',');
      //console.log(arr);
      this.postRequest('/back/practicestores/deletePractice', { ids: arr }).then(res => {
        //console.log(res);
        this.reload();
        this.$message(res.data.msg);
      });
    },
    deleteObj(e) {
      this.postRequest('/back/practicestores/deletePractice?ids=' + e.practiceId).then(res => {
        //console.log(res);
        this.reload();
        this.$message(res.data.msg);
      });
    },
    setbianji(e) {
      this.form = e;
      this.setradio = this.form.type;
      this.tianjia = true;
    },
    onSubmit() {
      //console.log(this.form);
      if (this.form.item != null) {
        this.form.item = this.form.item.split('-');
      }
      // isArray(item.item)
      this.postJson('/back/practicestores/updatePractice?id=' + this.form.practiceId, this.form).then(res => {
        //console.log(res);
        this.$message(res.data.msg);
      });
    },
    chaxun(val) {
      //console.log(val);
      this.page = val;
      this.addWord();
    },
    // getType() {
    //   this.postRequest('/comm/queryCategoryByType', { type: 'practice_type' }).then(res => {
    //     //console.log(res);
    //     this.typeList = res.data.data;
    //     this.radio = this.typeList[0].categoryCode;
    //   });
    // },
    addWord() {
            this.showtianjia = false

      let params = {
        page: this.page,
        size: this.size,
        type: this.radio,
                classId:this.classId

      };
      this.postRequest(`/back/practicestores/queryPracticeList`, params).then(res => {
        this.dataExam = res.data.data.list;
        this.dataExam.forEach((item, i) => {
          if (Array.isArray(item.item)) {
            this.dataExam[i].item = item.item.join(' - ');
          }
          // isArray(item.item)
        });
        this.data = res.data.data;
        //console.log(res);
      });
    },
    handleRemove(file, fileList) {
      //console.log(file, fileList);
    },
    handlePreview(file) {
      //console.log(file);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    }
  }
};
</script>

<style></style>
